<template>
    <div class="login">
      <div class="login-rapper" v-if="accountRegister">
        <div class="logo">
          <img src='http://39.98.226.123/ebook/logo/logo.jpg'/>
          <span>注册</span>
        </div>
        <!--表单-->
        <form >
          <div class="line-wrapper">
              <span>账号：</span>
              <div class="input-wapper">
                <input
                  type="text"
                  placeholder="请输入账号"
                  v-model="registerByAccount.account"
                  @blur="checkAccount"
                />
              </div>
          </div>
           <div class="line-wrapper">
              <span>密码：</span>
              <div class="input-wapper">
                <input
                  type="password"
                  v-model="registerByAccount.password"
                  placeholder="请输入密码">
              </div>
          </div>
          <div class="checkFormat" :style="tintStyle" >{{tintText}}</div>
          <div class="btn-group">
            <div class="btn-wrapper">
              <button @click="registerByAccountFun">注册</button>
            </div>
            <div class="btn-wrapper">
              <button  @click="reset">重置</button>
            </div>
          </div>
        </form>
        <div class="bottom-wrap">
            <span class="loginType" @click="changeRegisterWay('tel')"><u>手机号注册</u></span>
            <span class="register" @click="$router.push('/login')"><u>登录</u></span>
        </div>
      </div>
      <div class="login-rapper" v-else>
        <div class="logo">
          <img src='http://39.98.226.123/ebook/logo/logo.jpg'/>
          <span>注册</span>
        </div>
        <form >
          <div class="line-wrapper">
              <span>电话号码：</span>
              <div class="input-wapper">
                <input
                  type="tel"
                  placeholder="请输入电话号码"
                  v-model="registerByTel.tel"
                  @blur="checkTel"
                />
              </div>
          </div>
          <div class="line-wrapper">
            <span>验证码：</span>
            <div class="input-wapper">
              <input
                type="number"
                placeholder="请输入验证码"
                v-model="registerByTel.code"
                maxlength="6"
              />
            </div>
          </div>
          <div class="checkFormat" :style="tintStyle"  >{{tintText}}</div>
          <div class="btn-group">
            <div class="btn-wrapper">
              <button @click="getCode">获取验证码</button>
            </div>
            <div class="btn-wrapper">
              <button @click="reset">重置</button>
            </div>
          </div>
        </form>
        <div class="bottom-wrap">
          <span class="loginType" @click="changeRegisterWay('account')"><u>账号密码注册</u></span>
          <span class="register" @click="$router.push('/login')"><u>登录</u></span>
        </div>
      </div>
    </div>
</template>

<script>
  import Logo from '../../assets/images/logo.png'
  import { mapActions } from 'vuex'
  import { getCode, registerByCode, registerByPwd, verifyTel, verifyAccount } from '../../api/store'

  export default {
    name: 'Login',
    data() {
      return {
        accountRegister: true,
        tintText: '',
        tintStyle: { opacity: 0, color: 'red' },
        registerByAccount: {
          account: '',
          password: ''
        },
        registerByTel: {
          tel: '',
          code: ''
        }
      }
    },
    methods: {
      // ...mapActions(['loginAC']),
      // 获取验证码
      getCode() {
        console.log('getCode()')
        const { tintText, registerByTel: { tel } } = this
        if (tintText === '' && tel !== '') {
          this.tintText = ''
          Object.assign(this.tintStyle, { opacity: 0 })
          // 电话号码验证通过
          getCode(tel).then(res => {
            if (res.error_code) {
              this.tintText = res.message
              Object.assign(this.tintStyle, { opacity: 1, color: 'red' })
            } else {
              console.log('发送验证码成功')
              this.tintText = '发送验证码成功'
              Object.assign(this.tintStyle, { opacity: 1, color: 'green' })
            }
          })
        } else if (tel === '') {
          this.tintText = '* 请输入电话号码'
          Object.assign(this.tintStyle, { opacity: 1, color: 'red' })
        }
      },
      // 检查电话号码是否可以注册
      checkTel() {
        const { tel } = this.registerByTel
        const telReg = /^1[3456789]\d{9}$/
        if (tel === '') {
          this.tintText = '* 手机号不能为空'
          Object.assign(this.tintStyle, { opacity: 1, color: 'red' })
        } else if (!telReg.test(tel)) {
          // 电话号码验证不通过
          this.tintText = '* 电话号码格式不正确'
          Object.assign(this.tintStyle, { opacity: 1, color: 'red' })
        } else {
          this.tintText = ''
          Object.assign(this.tintStyle, { opacity: 0 })
          verifyTel(tel).then(res => {
            if (res.ifRegister) {
              this.tintText = '*电话已经注册，直接登录'
              Object.assign(this.tintStyle, { opacity: 1, color: 'red' })
            } else console.log('可以注册')
          })
        }
      },
      // 切换注册方式
      changeRegisterWay(approach) {
        if (approach === 'tel') {
          // 账号密码注册切换到电话注册
          this.accountRegister = false
        } else if (approach === 'account') {
          this.accountRegister = true
        }
        this.registerByAccount.account = ''
        this.registerByAccount.password = ''
        this.registerByTel.tel = ''
        this.registerByTel.code = ''
        this.tintText = ''
        Object.assign(this.tintStyle, { opacity: 0 })
      },
      // 检验(account)是否可以注册
      checkAccount() {
        const { account } = this.registerByAccount
        if (account !== '') {
          verifyAccount(account).then(res => {
            if (res.ifRegister) {
              this.tintText = '* 该账号已经注册过了，换一个吧'
              this.tintStyle = { color: 'red', opacity: 1 }
            } else {
              console.log('账号可以注册')
              this.tintText = ''
              this.tintStyle = { opacity: 0 }
            }
          })
        } else {
            this.tintText = '* 请输入账号'
            this.tintStyle = { color: 'red', opacity: 1 }
        }
      },
      // 通过账号密码进行注册
      registerByAccountFun() {
        // 获取账号密码，判空以及账号能否注册
        const { account, password } = this.registerByAccount
        if (account === '' || password === '') {
          this.tintText = '* 账号或者密码不能为空'
          this.tintStyle = { color: 'red', opacity: 1 }
        } else if (this.tintText !== '') {
          // this.tintText = '* 账号不满足要求喔'
          this.tintStyle = { color: 'red', opacity: 1 }
        } else {
          registerByPwd(account, password).then(res => {
            if (!res.error_code) this.$router.push('/')
            else {
              this.tintText = '* 注册失败，请稍后重试'
              this.tintStyle = { color: 'red', opacity: 1 }
            }
          })
        }
      },
      // 表单重置
      reset() {
        console.log('重置')
        this.registerByAccount.account = ''
        this.registerByAccount.password = ''
        if (this.tintText !== '') {
          this.tintStyle = { opacity: 0 }
        }
      }
    },
    watch: {
      codeListen(val) {
        console.log('codeListen', val)
        const { tintText, registerByTel: { tel } } = this
        if (val.length === 6 && tintText === '' && tel !== '') {
          console.log('发起注册请求', val.length === 6, tintText === '', tel !== '')
          this.tintText = ''
          Object.assign(this.tintStyle, { opacity: 0 })
          // 发起注册请求
          registerByCode(tel, val).then(res => {
            console.log('电话号码进行注册', res)
            if (res.error_code) {
              this.tintText = res.message
              Object.assign(this.tintStyle, { opacity: 1 })
            } else {
              this.$router.push('/login')
            }
          })
        } else if (tel === '') {
          this.tintText = '请输入电话号码'
          Object.assign(this.tintStyle, { opacity: 1, color: 'red' })
        } else if (val.length > 6) {
          this.registerByTel.code = val.slice(0, 6)
        }
      }
    },
    computed: {
      codeListen() {
        return this.registerByTel.code
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  @import "../../assets/styles/global";
    .login {
      height: 100%;
      background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
        .login-rapper {
        width: px2rem(600);
        height: px2rem(600);
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid white;
        border-radius: px2rem(50);
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        padding: px2rem(30);
        .logo {
          line-height: px2rem(80);
          text-align: center;
          border-bottom: 1px solid rgba(255,255,255,.3);
          padding-bottom: px2rem(20);
          margin-bottom: px2rem(20);
          img {
            width: px2rem(100);
            border-radius: 50%;
            vertical-align: middle;
            margin: 0 px2rem(40);
          }
          span {
            color: rgba(0, 0, 0, 0.336);
            font-size: px2rem(56);
          }
        }
        form {
          .checkFormat {
            font-size: 12px;
            text-align: center;
            margin: 10px 0;
            opacity: 0;
          }
          .line-wrapper {
            margin: 5px 0;
            padding: 5px 0;
            display: flex;
            justify-content: space-around;
            align-items: center;
            .input-wapper {
              // background: ;
              border-radius: 5px;
              border: 1px solid white;
              padding: 5px 0;
              input {
                text-indent: 10px;
                background: transparent;
                border: none;
                outline: none;
                color: rgba(0, 0, 0, 0.336);;
              }
            }
          }
          .btn-group {
            display: flex;
            justify-content: space-around;
            .btn-wrapper {
              padding: 5px 10px;
              border: 1px solid white;
              button {
                background: transparent;
                outline: none;
                border: none;
              }
            }
          }
        }
        .bottom-wrap {
          width: 80%;
          position: absolute;
          bottom: 20px;
          display: flex;
          justify-content: space-around;
        }
      }
    }
</style>
